<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,viewport-fit=cover">
    <meta name="renderer" content="webkit">
    <title>pmp考试题练习器(sm)</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/swiper-bundle.min.js"></script>
    <script type="text/javascript" src="js/data.js"></script>
</head>

<body>
    <div id="app">
        <div class="swiper">
            <!-- 遮罩层 -->
            <transition name="animation">
                <div @click="onovelay" v-if="isShowsubjects||isShowFavorites" class="overlayBox"></div>
            </transition>

            <!-- 成功提示 -->
            <transition name="animation">
                <div v-if="showToast" class="tipBox">成功!</div>
            </transition>

            <div class="header">
                <span class="GPT-box" @click="onAsk">问一问</span>
                <span class="numBox">第 {{curIndex}} 题</span>
                <span class="errBtn" @click="switchTopics">{{allTopics?'收藏夹题目':'所有题目'}}</span>
            </div>
            <!-- 所有题集 -->
            <div v-if="allTopics" class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in allData" :key="index">
                    <div class="optBox">
                        题目：
                        <div class="imgBox" v-if="item.img">
                            <image class="img" v-for="(itm,idx) in item.img" :key="idx" :src="itm" alt="图片丢失"
                                mode="widthFix">
                            </image>
                        </div>
                        <div class="questionBox"> {{item.question}} <p>{{item.traQue}}</p>
                        </div>
                    </div>
                    <div class="optsB">
                        <div class="itemBox" @click="chooseOne('A',item.right)">A. {{item.options.A}} <p>
                                {{item.traOpt?.A}}</p>
                        </div>
                        <div class="itemBox" @click="chooseOne('B',item.right)">B. {{item.options.B}} <p>
                                {{item.traOpt?.B}}</p>
                        </div>
                        <div class="itemBox" @click="chooseOne('C',item.right)">C. {{item.options.C}} <p>
                                {{item.traOpt?.C}}</p>
                        </div>
                        <div class="itemBox" @click="chooseOne('D',item.right)">D. {{item.options.D}} <p>
                                {{item.traOpt?.D}}</p>
                        </div>
                    </div>
                    <div v-show="isShowJiexi" :class="isRight?'jiexiBox active' : 'jiexiBox'">
                        <div>{{isRight?'回答正确':'回答错误'}}</div>
                        <div class="yourChoose">
                            <span>您选：{{yourSelection}}</span>
                        </div>
                        <div>{{item.analysis}}</div>
                    </div>
                </div>
            </div>

            <!-- 错题集 -->
            <div v-else class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in errData" :key="index">
                    <div class="optBox">
                        题目：
                        <div class="imgBox" v-if="item?.img">
                            <image class="img" v-for="(itm,idx) in item?.img" :key="idx" :src="itm" alt="图片丢失"
                                mode="widthFix">
                            </image>
                        </div>
                        <div class="questionBox"> {{item.question}} <p>{{item.traQue}}</p>
                        </div>
                    </div>
                    <div class="optsB">
                        <div class="itemBox" @click="chooseOne('A',item.right)">A. {{item.options.A}} <p>
                                {{item.traOpt?.A}}</p>
                        </div>
                        <div class="itemBox" @click="chooseOne('B',item.right)">B. {{item.options.B}} <p>
                                {{item.traOpt?.B}}</p>
                        </div>
                        <div class="itemBox" @click="chooseOne('C',item.right)">C. {{item.options.C}} <p>
                                {{item.traOpt?.C}}</p>
                        </div>
                        <div class="itemBox" @click="chooseOne('D',item.right)">D. {{item.options.D}} <p>
                                {{item.traOpt?.D}}</p>
                        </div>
                    </div>
                    <div v-show="isShowJiexi" :class="isRight?'jiexiBox active' : 'jiexiBox'">
                        <div>{{isRight?'回答正确':'回答错误'}}</div>
                        <div class="yourChoose">
                            <span>您选：{{yourSelection}}</span>
                        </div>
                        <div>{{item.analysis}}</div>
                    </div>
                </div>
            </div>

            <!-- footer部分 -->
            <div class="footer">
                <span class="btnBox" v-if="allTopics" @click="isShowsubjects = true">选题</span>
                <span class="btnBox" v-if="!allTopics" @click="isShowFavorites = true">收藏夹</span>
                <span class="btnBox" @click="mySwiper.slidePrev()">上一题</span>
                <span class="btnBox" @click="mySwiper.slideNext()">下一题</span>
                <span class="btnBox" v-if="allTopics" @click="onCollection">收藏</span>
                <span class="btnBox" v-if="!allTopics" @click="onUnCollection">取消收藏</span>
                <!-- 所有题 -->
                <div :class="isShowsubjects?'chooseBox transitioned':'chooseBox'">
                    <div class="titileBox">
                        <div class="">题卡</div>
                        <span class="closeBox" @click="isShowsubjects = false">X</span>
                    </div>
                    <div class="bigBox">
                        <div class="topicBox" v-for="item in 1000" @click="mySwiper.slideTo(item-1)" :key="item">
                            {{item}}</div>
                    </div>
                </div>
                <!-- 收藏题夹 -->
                <div :class="isShowFavorites?'chooseBox transitioned':'chooseBox'">
                    <div class="titileBox">
                        <div class="">收藏题卡</div>
                        <span class="closeBox" @click="isShowFavorites = false">X</span>
                    </div>
                    <div class="bigBox">
                        <div class="topicBox" v-for="(item,index) in collectionArr" :key="index"
                            @click="mySwiper.slideTo(index)">
                            {{item}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        new Vue({
            el: '#app',
            data() {
                return {
                    curIndex: 1, //当前是第几题
                    mySwiper: null, //
                    isRight: false, //是否选择对了
                    isShowJiexi: false, //
                    isShowsubjects: false, //是否展示所有题目
                    isShowFavorites: false, //是否展示所有收藏题夹
                    allTopics: true, //是否展示所有题
                    yourSelection: "", //你所选的答案
                    collectionArr: [], //收藏列表
                    dataMap: new Map(), //所有数据的map
                    errData: [], //错题集
                    showToast: false, //是否展示提示框
                    storageName: window.location.href + '-curIndex', //缓存当前做到了第几题
                    storageArrName: window.location.href + '-collectionArr', //缓存当前收藏夹里的题目id
                }
            },
            created() {
                console.log("%c sm题库", 'color:green')
                this.collectionArr = JSON.parse(localStorage.getItem(this.storageArrName)) || []
                this.allData.forEach(item => this.dataMap.set(item.id, item))
                this.onPractice() //生成错题集
            },
            mounted() {
                this.$nextTick(() => {
                    this.initSwiper()
                    //如果有上次做题的缓存就跳到那个题
                    let hasIndexCache = localStorage.getItem(this.storageName)
                    if (hasIndexCache) this.mySwiper.slideTo(hasIndexCache - 1)
                })
            },
            // 计算属性有缓存
            computed: {
                allData() {
                    return data
                }
            },
            methods: {
                /**
                 * 初始化swiper
                 */
                initSwiper() {
                    let that = this
                    this.mySwiper = new Swiper('.swiper', {
                        direction: 'horizontal', // 垂直切换选项
                        loop: false, // 循环模式选项
                        on: {
                            slideChangeTransitionEnd: function (event) {
                                that.changePage(event)
                            },
                            slideChangeTransitionStart: function (event) {
                                that.changeJiexiState(event)
                            },
                        },
                    })
                },
                /**
                 * 轮播图切换页面时的事件
                 */
                changePage(e) {
                    const {
                        activeIndex
                    } = e
                    this.curIndex = this.allTopics ? activeIndex + 1 : this.errData[activeIndex].id
                    if (this.allTopics) localStorage.setItem(this.storageName, this.curIndex)
                },
                /**
                 * 滑动之前关闭解析框
                 */
                changeJiexiState() {
                    this.isShowJiexi = false
                },
                /**
                 * 上一题
                 */
                onPre() {
                    this.mySwiper.slidePrev()
                },
                /**
                 * 点击选项
                 */
                chooseOne(yourSelection, right) {
                    this.isShowJiexi = true
                    this.yourSelection = yourSelection
                    if (yourSelection === right) {
                        this.isRight = true
                    } else {
                        this.isRight = false
                    }
                },
                /**
                 * 点击收藏
                 */
                onCollection() {
                    this.collectionArr.push(Number(this.curIndex))
                    this.collectionArr = [...new Set(this.collectionArr)]
                    this.collectionArr.sort((a, b) => a - b)
                    localStorage[this.storageArrName] = JSON.stringify(this.collectionArr)
                    this.onShowToast()
                },
                /**
                 * 展示提示框
                 */
                onShowToast() {
                    this.showToast = true
                    let timer = setTimeout(() => {
                        this.showToast = false
                        clearTimeout(timer)
                    }, 1500)
                },
                /**
                 * 取消收藏
                 */
                onUnCollection() {
                    //错误题集数组变更
                    this.errData = this.errData.filter(item => item.id != this.curIndex)
                    //错误题集id数组变更
                    this.collectionArr = this.collectionArr.filter(id => id != this.curIndex)
                    localStorage[this.storageArrName] = JSON.stringify(this.collectionArr)
                    this.onShowToast()
                },
                /**
                 * 生成错题集
                 */
                onPractice() {
                    this.collectionArr = JSON.parse(localStorage.getItem(this.storageArrName)) || []
                    console.log("看不到》》", this.collectionArr)
                    this.collectionArr.forEach(id => {
                        let one = this.dataMap.get(id + '')
                        this.errData.push(one)
                    })
                },
                /**
                 * 切花换答题模式
                 */
                switchTopics() {
                    if (this.allTopics) { // 此时是进入错题集题目模式
                        this.onPractice() //生成错题集
                    }
                    this.allTopics = !this.allTopics
                },
                /**
                 * 点击遮罩层的事件
                 */
                onovelay() {
                    this.isShowsubjects = false
                    this.isShowFavorites = false
                },
                /**
                 * 向chatGPT提问
                 */
                onAsk() {
                    window.open("http://chat.wushuyun.com/", "_blank",
                        "width=800,height=600,toolbar=no,location=no");
                },
            },
        })
    </script>
</body>

</html>